<!DOCTYPE html>
<html lang="en">
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>-->
<script src="../js/vue.js"></script>
<script src="../js/dayjs.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
.basic{
    width: 400px;
    height: 600px;
    border: 1px solid black;
}
.happy{
    width: 400px;
    height: 600px;
    border: 1px solid red;
}
.normal{
    width: 400px;
    height: 600px;
    border: 1px solid black;
    background-color: aquamarine;
}

</style>
<body>

<div id="app">
 <div :class="ab" @click="chagemethod">
     {{name}}
 </div>
    <div>
        <form  @submit.prevent="submit">
            <label for="account">account: </label>
            <input v-model="user.account" type="text" id="account"><br/>
          password  <input v-model="user.password" type="text" id="password"> <br/>
          gender  male<input v-model="user.gender"  value="male" type="radio" id="male" name="gender"><br/>
          gender  female<input v-model="user.gender" value="female" type="radio" id="female" name="gender"><br/>
          age<input v-model.number="user.age"   type="number" id="age" name="age"><br/>
            hobby:

            <input type="checkbox" name="study"  v-model="user.hobby" value="study" id="study"><label for="study">study</label>
            <input type="checkbox" name="game" value="game" v-model="user.hobby" id="game"><label for="game">game</label>
            <input type="checkbox" name="work" value="work" v-model="user.hobby" id="work"><label for="work">work</label><br/>
            <select>
                <option value="">school region</option>
                <option value="beijing">北京</option>
                <option value="sichuan">四川</option>
                <option value="shanghai">上海</option>
            </select><br/>
            other:things
            <textarea></textarea>
            <br/>
            <input type="checkbox" v-model="user.agree">阅读接受<a href="#">《用户协议》</a>
            <button type="submit">click</button>
        </form>
    </div>
</div>
<script type="text/javascript">
    const  app= new Vue({
        el: '#app',
        data:{
            name:'hellworld',
            ab:'',
           user:{
               account:'1',
               password:'',
               gender:'male',
               hobby:[],
               agree:'',
               age:''
           }
        },
        methods:{
          chagemethod(){
              const x = ['happy','basic','normal']
              this.ab= x[Math.floor(Math.random()*3)]
          },
            submit(){
                console.log(JSON.stringify(this.user))
                return false
          }

        }
    })
</script>
</body>
<!--<script src="../js/vue.js"/>-->

</html>